<template>
  <div class="edit-range">
    <slot></slot>
    <div class="edit-range-model" :style="rangeModelStyle"></div>
    <EditAlignLine />
  </div>
</template>
<script setup>
import { computed } from "vue"
import EditAlignLine from "../EditAlignLine/index.vue"
import { useStore } from "vuex"
let store = useStore()

let rangeModelStyle = computed(() => {
  let isDrag = store.state.chartEditStore.editCanvas?.isDrag ?? false
  let style = isDrag ? { zIndex: 9999 } : { zIndex: -1 }
  return style
})
</script>
<style scoped lang="scss">
.edit-range {
  width: 100%;
  height: 100%;

  .edit-range-model {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
  }
}
</style>
